<style lang="scss" scoped>
  .commonecharts_body {
    position: relative;
    .echart_container {
      width: 3.958vw;
      height:  3.958vw;
      margin: 2.083vw  0.937vm 0;
      box-sizing: border-box;
    }
    .slot{

    }
  }
</style>
<template>
  <div class="commonecharts_body" >
    <div class="echart_container" :class="name">

    </div>
    <slot class="slot"></slot>
  </div>
</template>

<script type="text/ecmascript-6">
  import moment from 'moment'

  export default {

    data() {
      return {
        mychart: null
      }
    },
    props: ['score','color','name'],
    mounted() {
      this.initEcharts()

    },
    watch: {
      'score': {
        handler(newVal, old) {
          this.initEcharts()
        },
        deep: true
      },
    },
    methods: {
      initEcharts() {
        let that = this;
        const myChart = echarts.init(document.querySelectorAll(`.${this.name}`)[0], null, {renderer: 'svg'});
        this.mychart = myChart;
        myChart.resize()
        const option = {
//          tooltip: {
//            trigger: 'none',
//            formatter: '{b}: <br/>{c} ({d}%)'
//          },
//          title:{
//            text:"垃圾占比",
//            left:"25%",
//            top:"44%",
//            textStyle:{
//              color:"#728088",
//              fontSize:16,
//            }
//          },
          color : [ this.color, '#253444'],
          series: [
            {
              name: '',
              type: 'pie',
              startAngle:45,
              radius: ['82%', '100%'],
              center: ['50%', '50%'],
              avoidLabelOverlap: false,
              hoverAnimation:false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: false,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                {value: this.score, name: ''},
                {value: 100 - this.score, name: ''},
              ]
            }
          ]
        };

        myChart.setOption(option);
      }

    },
    beforeDestroy() {
      if (this.mychart&& this.mychart.dispose) {
        this.mychart.dispose()
      }
    }
  }
</script>
